import React from 'react';

export class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      msg: '',
    };
  }

  fn = (args) => {
    this.setState({
      msg: args,
    });
  };
  render() {
    return (
      <div style={{ border: '1px solid red', padding: 20 }}>
        <h2>父组件</h2>
        <h2>{this.state.msg}</h2>
        <Child
          lastName={'王'}
          age={18}
          hobbies={['吃饭', '睡觉', '敲代码']}
          obj={{ name: 'Rose', age: 18 }}
          fn={this.fn}
          jsx={<h1>传个JSX</h1>}
        ></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <div style={{ border: '1px solid blue', padding: 20 }}>
        <h2>子组件</h2>
        <h2>{this.props.lastName}</h2>
        <h2>{this.props.age}</h2>
        <h2>{this.props.hobbies.join('=>')}</h2>
        <h2>{this.props.obj.name}</h2>
        <h2>{this.props.obj.age}</h2>
        <h2 onClick={() => this.props.fn('xxxx')}>儿子相对父亲说</h2>
        {this.props.jsx}
      </div>
    );
  }
}
